<template>
    <el-row id="myRow1">
        <p id="myP1_left">
            <el-icon><Fold /></el-icon>
            <span style="color: #000;">客服</span>
            <span>/</span>
            <span>投递记录</span>
        </p>
        <p></p>
    </el-row>
    <el-row id="myRow2"></el-row>
    <el-form :inline="true" :model="drawalListData" id="myForm">
        <el-form-item>
            <el-input 
            v-model="drawalListData.nickname"
            placeholder="请输入昵称或者手机号"
            :prefix-icon="Search"
            ></el-input>
        </el-form-item>
        <el-form-item>
            <el-select placeholder="设备编号或者设备地点" v-model="drawalListData.deviceCode">
                 <el-option 
                    v-for="item in deviceCodeOptions" 
                    :key="item.id" 
                    :label="item.label" 
                    :value="item.id"  
                ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-select placeholder="请选择状态" v-model="drawalListData.status">
                  <el-option 
                    v-for="item in statusOptions" 
                    :key="item.code" 
                    :label="item.status" 
                    :value="item.code"  
                ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <div class="demo-date-picker">
                <div class="block">
                <el-date-picker
                    v-model="myDate"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间" 
                    value-format="YYYY-MM-DD HH:mm:ss"
                />
                </div>
            </div>
        </el-form-item>
        <el-form-item>
            <el-button type="primary"
            @click="handleSearch"
            >搜索</el-button>
        </el-form-item>
    </el-form>
    <el-row id="myRow3">
        <p style="color: red;font-size: 20px;">提现合计:894449.86元</p>
        <el-button type="info" style="margin-bottom: 1em;"><el-icon><Refresh /></el-icon>刷新</el-button>
    </el-row>
    <el-table style="width: 100%;" border :data="tableData" @row-click="save">
        <el-table-column label="昵称" prop="nickname" width="200"></el-table-column>
        <el-table-column label="手机号" prop="phone" width="200"></el-table-column>
        <el-table-column label="设备编号" prop="device_code" width="200"></el-table-column>
        <el-table-column label="设备地点" prop="equipment_location" width="200"></el-table-column>
        <el-table-column label="投递重量/kg" prop="weight" width="200"></el-table-column>
        <el-table-column label="起始重量/kg" prop="initial_weight" width="200"></el-table-column>
        <el-table-column label="结束重量/kg" prop="final_weight" width="200"></el-table-column>
        <el-table-column label="积分" prop="integral" width="200"></el-table-column>
        <el-table-column label="金额/元" prop="reward" width="200"></el-table-column>
        <el-table-column label="投递时间" prop="created_at" width="200"></el-table-column>
        <el-table-column label="状态" prop="status" width="200">
            <template #default="scope">
                <span :style="{ color:scope.row.status === '正常' ? 'green':''}">
                    {{ scope.row.status }}
                </span>
            </template>
        </el-table-column>
        <el-table-column label="清运反馈状态" prop="clearing_status" width="200"></el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
            <template #default="scoped">
            <el-row >
                <el-col :span="8">
                    <el-button  style="margin-left: -11px;" @click="handleDetail(scoped.row)">详情</el-button>
                </el-col>
                <el-col :span="8">
                    <el-button  type="primary" style="margin-left: -7px;" @click="handleChange(scoped.row)">编辑</el-button>
                </el-col>
                <el-col :span="8">
                    <el-button @click="handlePoints(scoped.row)" type="warning" style="margin-left: -5px;">扣除积分</el-button>
                </el-col>
            </el-row>
            
            </template>
        </el-table-column>
    </el-table>
     <!-- 添加详情模态框 -->
        <el-dialog title="详情" v-model="dialogVisible" width="64%" margin-left="224px" >
            <el-form :model="drawalUpdate" label-width="94px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="昵称" prop="nickname">
                        <el-input v-model="drawalUpdate.nickname" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="手机号" prop="phone">
                        <el-input v-model="drawalUpdate.phone" />
                    </el-form-item>
                </el-col>
            </el-row>
             <el-row>
                <el-col :span="8">
                    <el-form-item label="设备编号" prop="device_code">
                        <el-input v-model="drawalUpdate.device_code" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="投递地点" prop="equipment_location">
                        <el-input v-model="drawalUpdate.equipment_location" />
                    </el-form-item>
                </el-col>
            </el-row>
             <el-row>
                <el-col :span="8">
                    <el-form-item label="投递重量/kg" prop="final_weight">
                        <el-input v-model="drawalUpdate.final_weight" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="投递时间" prop="delivery_time">
                        <el-input v-model="drawalUpdate.delivery_time" />
                    </el-form-item>
                </el-col>
            </el-row>
             <el-row>
                <el-col :span="8">
                    <el-form-item label="积分" prop="integral">
                        <el-input v-model="drawalUpdate.integral" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="扣除积分" prop="phone">
                        <el-input v-model="drawalUpdate.phone" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="状态" prop="status">
                    <el-input v-model="drawalUpdate.clearing_status" />
            </el-form-item>
            <el-form-item label="原因" >
                     <el-input
                        style="width: 603px"
                        :rows="2"
                        type="textarea"
                        placeholder=""
                        v-model="drawalUpdate.reason"
                    />
            </el-form-item>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="审核时间" >
                        <el-input v-model="drawalUpdate.review_time" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="审核人" >
                        <el-input v-model="drawalUpdate.reviewer" />
                    </el-form-item>
                </el-col>
            </el-row>
             <el-button
            @click="dialogVisible =false"
             >关闭</el-button>
        </el-form>
    </el-dialog>
    <!-- 编辑模态框 -->
     <el-dialog title="编辑" v-model="dialogVisibleEdit" width="64%" margin-left="224px" >
            <el-form :model="drawalEdit" label-width="115px">
                    <el-form-item label="昵称" prop="nickname">
                        <el-input v-model="drawalEdit.nickname" disabled/>
                    </el-form-item>
                    <el-form-item label="手机号" prop="phone">
                        <el-input v-model="drawalEdit.phone" disabled/>
                    </el-form-item>
                    <el-form-item label="设备编号" prop="device_code">
                        <el-input v-model="drawalEdit.device_code"  disabled/>
                    </el-form-item>
                    <el-form-item label="投递地点" prop="equipment_location">
                        <el-input v-model="drawalEdit.equipment_location"  disabled/>
                    </el-form-item>
                    <el-form-item label="起始重量/kg" prop="initial_weight">
                        <el-input v-model="drawalEdit.initial_weight" />
                    </el-form-item>
                    <el-form-item label="结束重量/kg" prop="final_weight">
                        <el-input v-model="drawalEdit.final_weight" />
                    </el-form-item>
                    <el-form-item label="投递重量/kg" prop="weight">
                        <el-input v-model="drawalEdit.weight"  disabled />
                    </el-form-item>
                    <el-form-item label="金额/元" prop="amount">
                        <el-input v-model="drawalEdit.amount"  disabled/>
                    </el-form-item>
                    <el-form-item label="回收价格/kg/元" prop="recyclingPrice">
                        <el-input v-model="drawalEdit.recyclingPrice"  disabled/>
                    </el-form-item>
                    <div class="button-row">
                        <el-button  @click="dialogVisibleEdit =false">取消</el-button>
                        <el-button type="primary" @click="handleSubmitEdit()">确定</el-button>
                    </div>
        </el-form>
    </el-dialog>
      <!-- 积分模态框 -->
     <el-dialog title="扣除积分" v-model="dialogVisiblePoints" width="64%" margin-left="224px" >
            <el-form :model="drawalPoints" label-width="115px">
                    <el-form-item label="昵称" prop="nickname">
                        <el-input v-model="drawalPoints.nickname" disabled/>
                    </el-form-item>
                    <el-form-item label="手机号" prop="phone">
                        <el-input v-model="drawalPoints.phone" disabled/>
                    </el-form-item>
                    <el-form-item label="原积分" prop="integral">
                        <el-input v-model="drawalPoints.integral"  disabled/>
                    </el-form-item>
                    <el-form-item label="扣除积分" prop="deductPoints">
                        <el-input v-model="deductPoint"  />
                    </el-form-item>
                    <el-form-item label="原因" prop="reason">
                        <el-input v-model="drawalPoints.reason" />
                    </el-form-item>
                    <el-form-item label="审核时间" prop="review_time">
                        <el-input v-model="drawalPoints.review_time" />
                    </el-form-item>
                    <div class="button-row">
                        <el-button  @click="dialogVisiblePoints =false">取消</el-button>
                        <el-button type="primary" @click="handleSubmitPoints()">确定</el-button>
                    </div>
        </el-form>
    </el-dialog>
</template>
<script setup>
    import { reactive,ref,onMounted } from 'vue';
     import { Refresh, Search} from '@element-plus/icons-vue';
     import {
      getDeliverList, getDeliverUpdate,getDeliverChange,getDeliverPoints
    } from '@/components/api/DeliverRecord'
    let dialogReplace = ref(false);
    let myDate = ref([])
    let tableData = ref([
        {
            nickname:'',
            phone:'',
            device_code:'',
            equipment_location:'',
            weight:'',
            initial_weight:'',
            final_weight:'',
            integral:'',
            reward:'',
            status:'',
            created_at:'',
            shenheshijian:'',
            clearing_status:'',
            note:''
        },
    ])
    const drawalListData = reactive({
        pageIndex:parseInt(1),
        pageSize:parseInt(10),
        phone:'',
        nickname:'',
        deviceCode:'',
        status:'',
        delivery_time:'',
        startTime:Number(myDate.value[0]),
        endTime:Number(myDate.value[1])
    })

    let drawalList = ref([])
    // 设备编号下拉选项
    let deviceCodeOptions = ref([]);
    // 状态下拉选项
    let statusOptions = ref([]);
    // 模态框
    const dialogVisible = ref(false);
    const dialogVisiblePoints = ref(false)
   
    // 模态框
     const dialogVisibleEdit = ref(false);
    let  getDrawalListFun = () => {
        getDeliverList(drawalListData)
        .then(res => {
            if(res.code == 200){
                drawalList.value = res.dataset.list
                tableData.value=drawalList.value 
                 // 提取设备编号，生成设备编号下拉选项
                const deviceCodesSet = new Set();
                drawalList.value.forEach(item => {
                if (item.device_code) {
                    deviceCodesSet.add(item.device_code);
                }
                });
                deviceCodeOptions.value = Array.from(deviceCodesSet).map(code => ({
                        id: code,
                        label: code
                }));

                // 提取状态，生成状态下拉选项
                const statusSet = new Set();
                drawalList.value.forEach(item => {
                if (item.status) {
                    statusSet.add(item.status);
                }
                });
                statusOptions.value = Array.from(statusSet).map(status => ({
                    code: status,
                    label: status
                }));
            }
        })
    }
    onMounted(() => {
            getDrawalListFun();
        });
        // 点击搜索
        const handleSearch =()=>{
            getDeliverList(drawalListData)
                .then(res => {
                if(res.code === 200){
                    drawalList.value = res.dataset.list;
                    tableData.value = drawalList.value;
                }
                });
        }
        // 调取详情接口
         let drawalUpdate = ref({
            nickname:'',
            phone:'',
            device_code:'',
            equipment_location:'',
            final_weight:'',
            delivery_time:'',
            integral:'',
            title:'',
            review_time:'',
            clearing_status:'',
            reviewer:'',
            reason:''
        })
        // 新增：详情点击事件
        const handleDetail = (row) => {
        dialogVisible.value = true
            getDeliverUpdate({ 
                id: parseInt(row.id)
            })
                .then(res => {
                if (res.code === 200) {
                    console.log(res.dataset)
                    drawalUpdate.value = res.dataset;
                }
                })
                .catch(err => {
                console.error('详情接口调用失败', err);
                drawalUpdate.value = {};
                });
        };
          let drawalEdit = reactive({
                id:'',
                nickname:'',
                phone:'',
                device_code:'',
                equipment_location:'',
                initial_weight:'',
                final_weight:'',
                weight:'',
                recyclingPrice:'',
                amount:'',
          })
        // 新增：编辑事件
        const handleChange = (row) => {
            dialogVisibleEdit.value = true
             drawalEdit.id = row.id;
        };
        const handleSubmitEdit = () => {
        getDeliverChange(
            {
                id: parseInt(drawalEdit.id),
                initial_weight: drawalEdit.initial_weight,
                final_weight: drawalEdit.final_weight
            }
        )
            .then(res => {
            if (res.code === 200) {
                dialogVisibleEdit.value = false;
                getDrawalListFun();
                ElMessage.success('编辑成功');
            }
            })
            .catch(err => {
            console.error('编辑提交失败', err);
            });
        };
        let save = (value)=>{
            console.log(value)
            drawalPoints.id = value.id;
            drawalEdit.nickname=value.nickname;
            drawalEdit.phone=value.phone;
            drawalEdit.device_code=value.device_code;
            drawalEdit.equipment_location=value.equipment_location;
            drawalEdit.initial_weight=value.initial_weight;
            drawalEdit.final_weight=value.final_weight;
            drawalEdit.weight=value.weight;
            drawalEdit.phone=value.phone;
            drawalEdit.amount=value.amount;
        }
         // 积分事件
        const handlePoints = (row) =>{
            dialogVisiblePoints.value = true;
            drawalPoints.nickname = row.nickname;
            drawalPoints.phone = row.phone;
            drawalPoints.integral = row.integral;
            drawalPoints.integral = row.integral;
            drawalPoints.equipment_location = row.equipment_location;
            drawalPoints.review_time = row.review_time;
        }
     // 积分点击确定提交数据
     let deductPoint = ref('')
         let drawalPoints = reactive({
                id:0,
                phone:'',
                deductPoints:'',
                nickname:'',
                integral:'',
                equipment_location:'',
                review_time:''
          })
        const handleSubmitPoints = () => {
            drawalPoints.deductPoints = Math.abs(Number(deductPoint.value))
        getDeliverPoints(
            {
                Id: parseInt(1),
                deductPoints:drawalPoints.deductPoints,
                reason:drawalPoints.reason
            }
        ).then(res => {
            console.log(drawalPoints.deductPoints)
            if (res.code === 200) {
                dialogVisibleEdit.value = false;
            }
            }).catch(err => {
            console.error('编辑提交失败', err);
            });
        };
</script>

<style scoped lang="less">
    #myRow1{
        border-bottom: 1px solid #ccc;
        padding: 0 1em;
        box-sizing: border-box;
        height: 3em;
        display: flex;
    }
    #myP1_left{
        height: 100%;
        display: flex;
        align-items: center;
        margin: 0;
        span{
            font-size: 14px;     
            margin-left: 0.7em;  
            color: #9AAABF; 
        }
    }
    #myRow2{
        height: 40px;
        align-items: center;
        padding: 0 1em;
        border-bottom: 1px solid #ccc;
    }
    #myForm{
        padding-left: 1.2em;
        padding-top: 1.3em;
        .el-form-item{
            width: 16%;
        }
        button{
            margin-left: 11em;
        }
    }
    #myRow3{
    align-items: center;
        justify-content: space-between;
        padding: 0 1em;
    }
    .myFormItem1{
        width: 45%;
    }
    .myFormItem2{
        width: 85%;
    }
    // 模态框
    .el-dialog{
        width: 600px;
    }
    :deep(.el-input){
        width: 259px;
    }
</style>